<template>
	<div>
		<div class="header1">
			<div>
				<router-link to="/index/medal">
                      <span class="el-icon-close" ></span>
				</router-link>
				
			</div>
		</div>
		<div class="body1">
			<img src="./img/11.png" />
		</div>
		<div class="foot">
		<div class="one">
			<span class="el-icon-user"></span>
			<input type="text" placeholder="邮箱/手机号" v-model="form.username"/>
		</div>		
		<div class="one">
			<span class="el-icon-lock"></span>
			<input type="password" placeholder="请输入密码" v-model="form.password" @change="Iflogin"/>
		</div>	
		<div class="two">
			 <el-button type="warning" @click="Iflogin">登录</el-button>
		</div>
		<div class="three">
			<div>
				<span>第三方账号</span>
			</div>
			<div class="four">
				<router-link to="/medal/zhuce" style="text-decoration: none;">
					<span style="color: #B3D8FF;">注册账号</span>
				</router-link>
				<span>|</span>
				<span style="color: #B3D8FF;">忘记密码</span>
			</div>
		</div>
		</div>
	</div>
</template>

<script>
	export default {
	  data(){
	      return{
	          form:{
	              username:'',
	              password:''
	          },
	  
	      }
	  },
	  methods:{
	      Iflogin(){
	          this.$http.post('/api/users/weibo',this.form).then(({
	                  data,
	                  config
	              }) =>{
	                  //解构语法
	                  console.log(data, config);
	                  if (data.code == 200) {
	                      this.$message.success('登录成功')
	                      // console.log(res);
	                      console.log(data.token);
	                      console.log(data.username);
	                      this.$store.commit('getusername',data.username)
	                      window.sessionStorage.setItem("token",data.token)
	                      this.$router.push('/index/medal')
	                  } else {
	                     this.$message.error('登录失败')
	                      // console.log(config.token);
	                  }
	              })
	      }
	  }
	  // methods:{
		 //  goto(){
			//   this.$router.go(-1);
		 //  }
	  // },
	 
	}
</script>

<style lang="less" scoped>
	.body1{
		text-align: center;
		margin:40px 0;
		
	}
	.body1 img{
		width: 30%;
	}
	.header1 span{
		font-size:64px;
	}
	.one{
		display:flex ;
		margin-bottom: 8px;
	}
	.one span{
		margin-left: 16px;
		width: 7%;
		font-size: 40px;
		line-height: 64px;
	}
	.one input{
		flex: 1;
		height: 64px;
		
	}
	.two button{
		width: 85%;
		margin-left: 7%;
		margin-top: 40px;
		height: 80px;
	}
	.three{
		margin-top:40px;
	}
	.three div{
		text-align: center;
		margin-bottom: 32px;
	}
	.four span{
		margin: 0 8px;
	}
	a{
        color: black;
	}
		
</style>
